<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>账单结算</el-breadcrumb-item>
			<el-breadcrumb-item>商户余额明细</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input v-model="query.sn" placeholder="交易流水号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="query.logic_sn" placeholder="支付记录编号"></el-input>
							</el-form-item>
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_110" v-model="city_val" placeholder="请选择城市" @change="changeCity">
									<el-option
										v-for="item in cityList"
										:key="item.id"
										:label="item.name"
										:value="`${item.id}|${item.name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="s_area_arr" multiple collapse-tags placeholder="商圈">
									<el-button
										size="mini"
										type="primary"
										class="round-right all-area"
										@click="selectAllArea()"
										native-type="button"
										>{{ areaStatus ? '全选' : '取消全选' }}</el-button
									>
									<el-option
										v-for="item in areaList"
										:key="item.id"
										:label="item.area_name"
										:value="`${item.id}|${item.area_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_190"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item class="w_80">
								<el-select v-model="query.logic_type" placeholder="交易类型">
									<el-option label="充值" value="1"></el-option>
									<el-option label="提现" value="2"></el-option>
									<el-option label="扣款" value="3"></el-option>
									<el-option label="退款" value="4"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="start_time">
								<el-date-picker
									class="w_180i"
									v-model="query.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="创建开始时间"
								>
								</el-date-picker> </el-form-item
							>~
							<el-form-item prop="end_time">
								<el-date-picker
									class="w_180i"
									v-model="query.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="创建结束时间"
								>
								</el-date-picker>
							</el-form-item>

							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetDataBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" type="index" label="序号" width="50px" align="center"></el-table-column>
						<el-table-column prop="sn" label="交易流水号" width="150px">
							<template slot-scope="{ row }">
								<span>{{ row.sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="170px">
							<template slot-scope="{ row }">
								<span>{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商" width="110"></el-table-column
						><el-table-column prop="city_name" label="城市" width="110"></el-table-column>
						<el-table-column prop="area_name" label="商圈" width="110"></el-table-column>
						<el-table-column prop="amount" label="金额（元）" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.amount }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="amount_after" label="余额(元)" width="80px">
							<template slot-scope="{ row }">
								<span>{{ row.amount_after }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="logic_type_name" label="交易类型" width="100px">
							<template slot-scope="{ row }">
								<span>{{ row.logic_type_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="channel_name" label="支付方式" width="120px"></el-table-column>
						<el-table-column prop="entry_company" label="到账公司" min-width="200px"></el-table-column>
						<el-table-column prop="remark" label="备注" width="200px"></el-table-column>
						<el-table-column prop="logic_sn" label="支付订单号" width="160px">
							<template slot-scope="{ row }">
								<span class="pointer u text-primary" @click="goToMore(row)">{{ row.logic_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="操作时间" width="150px"></el-table-column>
						<el-table-column prop="creater_name" label="操作人" width="150px"></el-table-column>
						<el-table-column label="操作" width="60px" fixed="right">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="warning" @click="showSeeTag(row)">查看</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 查看弹框 -->
		<el-dialog
			title="交易详情"
			:visible.sync="seeTag"
			width="700px"
			:close-on-click-modal="false"
			:before-close="hiddenRY"
		>
			<div class="auditCentent tz seeTag">
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">交易流水号：</div>
						<div class="fl list-cont">
							{{ rowData.sn }}
						</div>
					</div>
					<div class="row-info clear">
						<div class="fl title-key">支付订单号：</div>
						<div class="fl list-cont">
							{{ rowData.logic_sn }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">店铺名称：</div>
						<div class="fl list-cont">
							{{ rowData.shop_name }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next" v-if="rowData.transaction_id">
					<div class="row-info clear">
						<div class="fl title-key">微信商户订单号：</div>
						<div class="fl list-cont">
							{{ rowData.transaction_id }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">交易金额：</div>
						<div class="fl list-cont">{{ rowData.amount }}元</div>
					</div>
					<div class="row-info clear">
						<div class="fl title-key">余额：</div>
						<div class="fl list-cont">{{ rowData.amount_after }}元</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">交易类型：</div>
						<div class="fl list-cont">
							{{ rowData.logic_type_name }}
						</div>
					</div>
					<div class="row-info clear">
						<div class="fl title-key">支付方式：</div>
						<div class="fl list-cont">
							{{ rowData.channel_name }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">备注：</div>
						<div class="fl list-cont">
							{{ rowData.remark }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">操作时间：</div>
						<div class="fl list-cont">
							{{ rowData.add_time }}
						</div>
					</div>
				</div>
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">操作人：</div>
						<div class="fl list-cont">
							{{ rowData.creater_name }}
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="resetBtn" @click="hiddenRY()">关 闭</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	fetchAreaList,
	getShopInfo,
	fetchRecordList2,
	shopRecharge,
	shopWithdraw,
	shopSetoverdraft,
	getAccountInfo,
	fetchShopList
} from '@/api/shop'
import { fetchCityList } from '@/api/city.js'

var common = require('../../../static/tool.js')
export default {
	name: 'ShopAccount',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			// shop_name: '',
			shop_sn: '',
			account_sn: '',
			//搜索对应值
			query: {},
			demandList: [],
			overdraftMoney: '0', //可透支余额
			amountMoney: '0', //余额
			recharge: { amount: '', channel: '', entry_company: '', remark: '' },
			withdrawal: { amount: '', remark: '' },
			overdraft: { amount: '', remark: '' },
			overdraft_record: [], //操作记录
			shopInfo: { shop_name: '', company_name: '', contact: '', type: '', registration_no: '', contact_phone: '' },
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,
			rechargeTag: false,
			withdrawalTag: false,
			overdraftTag: false,
			recordTag: false,
			seeTag: false,
			rowData: '',
			shopList: [], //店铺列表
			cityList: [], //城市列表
			city_arr: '',
			city_id: '',
			city_name: '',
			city_val: '',
			areaList: [], //区域列表
			s_area_arr: '', //商圈信息
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			areaStatus: true,
			agent_reset: 0
		}
	},
	computed: {
		city_value() {
			return this.city_val
		}
	},
	watch: {
		//商圈改变
		areaList(newValue, oldValue) {
			this.listData()
		}
		// 城市改变
		// city_value(newVal, oldVal) {
		// if (oldVal) {
		// 	let [id, name] = oldVal.split('|')
		// 	if (id === '北京') {
		// 		id = 1
		// 	}
		// 	// 存储旧的商圈数据
		// 	this.selectedAreasMap[`city-${id}`] = this.s_area_arr
		// }
		// console.log('存储值', this.selectedAreasMap)
		// if (newVal && this.city_id) {
		// 	this.fetchAreaList(this.city_id) //商圈列表
		// 	this.getShopList(this.city_id) //店铺列表
		// }
		// }
	},
	created() {
		// this.selectedAreasMap = {}
		// this.resetData()
	},
	mounted() {},
	methods: {
		async listData() {
			try {
				let s_departmentIds_Arr = new Array()
				this.s_area_arr.forEach(element => {
					let [id, name] = element.split('|') // es6 数组解构赋值
					s_departmentIds_Arr.push(id.toString())
				})

				let ret = await fetchRecordList2({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					account_sn: this.account_sn,
					sn: this.query.sn,
					agent_id: this.query.agent_id,
					city_id: this.city_id,
					area_id: '' + s_departmentIds_Arr,
					shop_name: this.shop_name,
					logic_sn: this.query.logic_sn,
					logic_type: this.query.logic_type,
					start_time: this.query.start_time,
					end_time: this.query.end_time
				})

				if (ret.list) {
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log(err)
			}
		},

		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		async getShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30, //已合作的店铺
					status: 1, //启用的店铺
					city_id: this.city_id,
					agent_id: this.query.agent_id
				})
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList = ret.list
				} else {
					this.shopList = []
				}
			} catch (err) {
				console.log(err)
			}
		},
		// 监听城市val变化
		changeCity() {
			let [id, name, city_sn] = this.city_val.split('|') // es6 数组解构赋值
			this.city_id = id
			this.city_name = name
			this.city_sn = city_sn
			this.shop_id = ''
			this.shop_name = ''
			this.fetchAreaList() //商圈列表
			this.getShopList() //店铺列表
		},
		//获取商圈列表
		fetchAreaList() {
			this.s_area_arr = []
			let fn = new FormData()
			fn.append('city_id', this.city_id)
			fn.append('agent_id', this.query.agent_id)
			this.$http.post(this.url + '/area/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.area_name
							})
							this.areaList = res.data.data.list
							// if (this.s_area_arr == '' || this.s_area_arr == null) {
							// 	// 默认选中非254-平谷的
							// 	this.areaList.forEach(element => {
							// 		// 平谷
							// 		if (element.area_name != '平谷') {
							// 			var pusharr = element.id + '|' + element.area_name
							// 			this.s_area_arr.push(pusharr)
							// 		}
							// 	})
							// }
							// if (this.selectedAreasMap[`city-${city_id}`] && this.selectedAreasMap[`city-${city_id}`].length) {
							// 	this.s_area_arr = this.selectedAreasMap[`city-${city_id}`]
							// }
						} else {
							this.areaList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		resetDataBtn() {
			this.resetData()
			// this.listData()
		},
		resetData() {
			this.pageNum = 1
			this.query.sn = ''
			this.query.logic_sn = ''
			this.query.logic_type = ''
			this.query.start_time = ''
			this.query.end_tim = ''
			this.shop_id = ''
			this.shop_name = ''
			this.agent_reset += 1
		},
		goToMore(row) {
			const { href } = this.$router.resolve({
				path: '/orderTradeList',
				query: { logic_sn: row.logic_sn }
			})
			window.open(href, '_blank')
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		//导出
		async downloadOrder() {
			let s_departmentIds_Arr = new Array()
			this.s_area_arr.forEach(element => {
				let [id, name] = element.split('|') // es6 数组解构赋值
				s_departmentIds_Arr.push(id.toString())
			})

			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				operation: 'export',
				account_sn: this.account_sn,
				sn: this.query.sn,
				logic_sn: this.query.logic_sn,
				logic_type: this.query.logic_type,
				start_time: this.query.start_time,
				end_time: this.query.end_time,
				city_id: this.city_id,
				area_id: '' + s_departmentIds_Arr,
				shop_name: this.shop_name,
				agent_id: this.query.agent_id
			}
			let param = $.param(obj)
			window.location.href = this.url + '/shop/recordList?' + param
		},
		showSeeTag(row) {
			this.seeTag = true
			this.rowData = row
		},
		//隐藏所有的弹框
		hiddenRY() {
			this.seeTag = false
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
		},
		//全选-取消全选商圈
		selectAllArea() {
			let arr = []
			this.areaList.forEach(item => {
				arr.push(`${item.id}|${item.area_name}`)
			})
			if (this.areaStatus == true) {
				this.s_area_arr = arr
			} else {
				this.s_area_arr = []
			}
			this.areaStatus = !this.areaStatus
			// this.shearchBtn()
		},
		setValue(arrVal) {
			// console.log('agent_id', item)
			// this.query.agent_id = item
			this.query.agent_id = arrVal.agent_id
			this.cityList = arrVal.city_list
			this.city_val = +this.cityList[0].id + '|' + this.cityList[0].name
			this.city_id = this.cityList[0].id
			this.city_name = this.cityList[0].name
			this.shop_id = ''
			this.shop_name = ''
			this.fetchAreaList() //商圈列表
			this.getShopList() //获取店铺
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}
.ShopAccount .row-info .title-key {
	width: 105px;
}

.ShopAccount .timeline {
	float: left;
}

.ShopAccount .next {
	margin-left: 20px;
}

.ShopAccount .timeline .money {
	color: #d40505;
}

.ShopAccount .timeline .record {
	width: 380px;
	margin-top: 6px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}

.ShopAccount .dzgs .el-select .el-input {
	width: 250px;
}

.seeTag .row-info {
	min-width: 260px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopAccountDetails.vue